import { Breadcrumb, Button, Space, Table, TableProps } from 'antd';
import React, { FC } from 'react';
import { FormPanel, ExtendReader, type FormPanelObject, InputType, FormPanelBtnAlign, Utils } from 'lfun-bg-comp';
import { useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';
import _ from 'lodash';
import { PageContainer } from '@/component/page-container';
import { GENDER, YES_NO } from '@/constant/basicOptions';
import { EDUCATIONAL_BACKGROUND, HIGHEST_EDUCATION, RETIRE_TYPE } from '@/constant/teachOptions';
import { POLITICAL_STATUS } from '@/constant/studentOptions';
import { PAGINATIONCONFIG } from '@/constant/page';
import { getPathRoot, get_stoge_pz, set_stoge_pz } from '@/utils';
import { listRetire } from '@/service/teacher/retire';
import { DownOutlined } from '@ant-design/icons';
import PermissionButton, { isPermissionOperate } from '@/component/permission-button';

const Groups: FC = () => {
  const [loading, setLoading] = React.useState(false);
  const [data, setData] = React.useState([]);
  const [total, setTotal] = React.useState(0);
  const [pageSize, setPageSize] = React.useState(get_stoge_pz());
  const [pageIndex, setPageIndex] = React.useState(1);
  const [form, setForm] = React.useState(null);
  const [expand, setExpand] = React.useState(false);
  const isSchool = Utils.getProps('isSchool');

  const navigator = useNavigate();

  const searchList = [
    {
      title: '',
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      inputs: [
        {
          label: '教职工编码',
          name: 'teacher_code',
          key: 'teacher_code',
          textRange: [0, 20],
        },
        {
          label: '姓名',
          name: 'teacher_name',
          key: 'teacher_name',
          textRange: [0, 20],
        },
        {
          label: '性别',
          name: 'teacher_gender',
          key: 'teacher_gender',
          inputType: InputType.select,
          renderOption: GENDER,
        },
        {
          label: '国籍/地区',
          name: 'teacher_nationality',
          key: 'teacher_nationality',
          inputType: InputType.select,
          renderOption: GENDER,
        },
        {
          label: '手机号',
          name: 'teacher_mobile',
          key: 'teacher_mobile',
          textRange: [0, 20],
        },
        {
          label: '身份证类型',
          name: 'teacher_id_type',
          key: 'teacher_id_type',
          inputType: InputType.select,
          renderOption: GENDER,
        },
        {
          label: '身份证号',
          name: 'teacher_id_number',
          key: 'teacher_id_number',
          textRange: [0, 18],
        },
        {
          label: '政治面貌',
          name: 'political_status',
          key: 'political_status',
          inputType: InputType.select,
          renderOption: POLITICAL_STATUS,
        },
        {
          label: '最高学历',
          name: 'highest_education',
          key: 'highest_education',
          inputType: InputType.cascader,
          renderOption: EDUCATIONAL_BACKGROUND,
        },
        {
          label: '出生日期',
          name: 'teacher_date_of_birth',
          key: 'teacher_date_of_birth',
          inputType: InputType.date,
        },
        {
          label: '教职工来源',
          name: 'teacher_source',
          key: 'teacher_source',
          inputType: InputType.select,
          renderOption: GENDER,
        },
        {
          label: '是否在编',
          name: 'teacher_onboarding',
          key: 'teacher_onboarding',
          inputType: InputType.select,
          renderOption: GENDER,
        },
        {
          label: '用人形式',
          name: 'teacher_employment_form',
          key: 'teacher_employment_form',
          inputType: InputType.select,
          renderOption: GENDER,
        },
        {
          label: '教师资格证',
          name: 'teacher_qualification_certificate',
          key: 'teacher_qualification_certificate',
          inputType: InputType.select,
          renderOption: GENDER,
        },
        {
          label: '是否县级及以上骨干教师',
          name: 'teacher_qualification_certificate',
          key: 'teacher_qualification_certificate',
          inputType: InputType.select,
          renderOption: GENDER,
        },
        {
          label: '教职工类别',
          name: 'teacher_category',
          key: 'teacher_category',
          inputType: InputType.select,
          renderOption: GENDER,
        },
        {
          label: '现任岗位类型',
          name: 'teacher_category',
          key: 'teacher_category',
          inputType: InputType.select,
          renderOption: GENDER,
        },
        {
          label: '现任岗位等级',
          name: 'teacher_category',
          key: 'teacher_category',
          inputType: InputType.select,
          renderOption: GENDER,
        },
        {
          label: '现任专业技术职务',
          name: 'teacher_category',
          key: 'teacher_category',
          inputType: InputType.select,
          renderOption: GENDER,
        },
        {
          label: '参加工作年月',
          name: 'teacher_date_of_employment',
          key: 'teacher_date_of_employment',
          inputType: InputType.date,
        },
        {
          label: '进校年月',
          name: 'enter_school_time',
          key: 'enter_school_time',
          inputType: InputType.dateRange,
          formatSubmitValue: (value, formPanelObject: FormPanelObject) => {
            ExtendReader.formatSubmitValueByDateRange(value, formPanelObject, 'enter_school_time');
            return null;
          },
        },
        {
          label: '退休时间',
          name: 'retire_time',
          key: 'retire_time',
          inputType: InputType.date,
        },
      ],
    },
  ];

  const searchNotSchoolForm = [
    {
      label: '区县',
      name: 'county',
      key: 'county',
      textRange: [0, 20],
    },
    {
      label: '任职单位',
      name: 'work_unit',
      key: 'work_unit',
      textRange: [0, 20],
    },
  ];

  const columns: TableProps['columns'] = [
    {
      title: '教职工编码',
      dataIndex: 'teacher_code',
      key: 'teacher_code',
    },
    {
      title: '姓名',
      dataIndex: 'teacher_name',
      key: 'teacher_name',
    },
    {
      title: '性别',
      dataIndex: 'teacher_gender',
      key: 'teacher_gender',
      render: (text: string) => {
        return _.find(GENDER, { value: String(text) })?.label;
      },
    },
    {
      title: '类型',
      dataIndex: 'teacher_gender',
      key: 'teacher_gender',
      render: (text: string) => {
        return _.find(GENDER, { value: String(text) })?.label;
      },
    },
    {
      title: '手机号',
      dataIndex: 'teacher_mobile',
      key: 'teacher_mobile',
    },
    {
      title: '身份证号码',
      dataIndex: 'teacher_id_number',
      key: 'teacher_id_number',
    },
    {
      title: '任职单位',
      dataIndex: 'teacher_id_number',
      key: 'teacher_id_number',
    },
    {
      title: '办公',
      dataIndex: 'teacher_gender',
      key: 'teacher_gender',
      render: (text: string) => {
        return _.find(GENDER, { value: String(text) })?.label;
      },
    },
    {
      title: '所在地',
      dataIndex: 'teacher_id_number',
      key: 'teacher_id_number',
    },
    // {
    //   title: '最高学历',
    //   dataIndex: 'highest_education',
    //   key: 'highest_education',
    //   render: (text: string) => {
    //     return _.find(HIGHEST_EDUCATION, { value: String(text) })?.label;
    //   },
    // },
    // {
    //   title: '政治面貌',
    //   dataIndex: 'political_status',
    //   key: 'political_status',
    //   render: (text: string) => {
    //     return _.find(POLITICAL_STATUS, { value: String(text) })?.label;
    //   },
    // },
    // {
    //   title: '是否在编',
    //   dataIndex: 'in_post',
    //   key: 'in_post',
    //   render: (text: boolean) => {
    //     return _.find(YES_NO, { value: text })?.label;
    //   },
    // },
    // {
    //   title: '进本校年月',
    //   dataIndex: 'enter_school_time',
    //   key: 'enter_school_time',
    //   render: (text: any) => {
    //     if (!text) return '';
    //     return dayjs(text).format('YYYY-MM-DD');
    //   },
    // },
    // {
    //   title: '非在职时间',
    //   dataIndex: 'retire_date',
    //   key: 'retire_date',
    //   render: (text: any) => {
    //     if (!text) return '';
    //     return dayjs(text).format('YYYY-MM-DD');
    //   },
    // },
    // {
    //   title: '离/退休证号',
    //   dataIndex: 'retire_number',
    //   key: 'retire_number',
    // },
    // {
    //   title: '状态',
    //   dataIndex: 'teacher_sub_status',
    //   key: 'teacher_sub_status',
    //   render: (text: any) => _.find(RETIRE_TYPE, { value: String(text) })?.label,
    // },
    {
      title: '操作',
      dataIndex: 'op',
      key: 'op',
      fixed: 'right',
      //width: 150,
      align: 'center',
      // hidden: !isPermissionOperate(),
      render: (text, record) => {
        return (
          <>
            <Space>
              <Button type="link" onClick={() => navigator(`${getPathRoot()}/nonemployed/retire/reemploy/view`)}>
                查看
              </Button>
              {isSchool && (
                <Button type="link" onClick={() => navigator(`${getPathRoot()}/nonemployed/retire/reemploy/reemploy`)}>
                  返聘
                </Button>
              )}
            </Space>
            <PermissionButton permission="view">
              <Button
                type="link"
                onClick={() => navigator(`${getPathRoot()}/nonemployed/details/${record.teacher_id}`)}
              >
                查看
              </Button>
            </PermissionButton>
          </>
        );
      },
    },
  ];

  const searchTemplate = () => {
    const inputs = _.cloneDeep(searchList);
    !isSchool && inputs[0].inputs.unshift(...searchNotSchoolForm);
    inputs[0].inputs = expand ? inputs[0].inputs : inputs[0].inputs.slice(0, 9);
    return inputs;
  };

  const fetchData = async params => {
    setLoading(true);
    const res = await listRetire(params);
    if (res.success) {
      setData(res?.data?.items?.length > 0 ? res?.data?.items : [{ id: 0 }]);
      setTotal(res.data.total);
      setPageSize(res.data.per_page);
      setPageIndex(res.data.page);
    }
    setLoading(false);
  };
  const pageChange = (page, per_page) => {
    set_stoge_pz(per_page);
    fetchData({ ...form?.getFieldsValue(), page, per_page });
  };
  React.useEffect(() => {
    fetchData({ page: pageIndex, per_page: pageSize });
  }, []);

  const buttonsForm = () => {
    return [
      <a
        style={{ fontSize: 12 }}
        onClick={() => {
          setExpand(!expand);
        }}
      >
        <DownOutlined rotate={expand ? 180 : 0} /> {expand ? '收起' : '展开'}
      </a>,
    ];
  };

  return (
    <PageContainer header={<Breadcrumb items={[{ title: '离退休信息管理' }]} />}>
      <FormPanel
        btnsAlign={FormPanelBtnAlign.right}
        restBtnText="重置"
        submitBtnText="查询"
        buttons={buttonsForm()}
        onLoad={(form: FormPanelObject) => setForm(form)}
        onFinish={(form: FormPanelObject) => {
          const params = form.getFieldsValue();
          fetchData({ ...params, page: 1, per_page: pageSize });
          return false;
        }}
        onReset={() => {
          fetchData({ page: 1, per_page: pageSize });
          form.resetFields();
        }}
        template={searchTemplate()}
      />
      {isSchool && (
        <Space style={{ marginBottom: 20 }}>
          <Button type="primary" onClick={() => navigator(`${getPathRoot()}/nonemployed/retire/retirement`)}>
            发起离退休
          </Button>
        </Space>
      )}
      <Table
        loading={loading}
        dataSource={data}
        columns={columns}
        scroll={{ x: 'max-content' }}
        pagination={{ ...PAGINATIONCONFIG, total, pageSize, current: pageIndex, onChange: pageChange }}
      />
    </PageContainer>
  );
};
export default Groups;
